<template>
    <div class="pd-30">
        <div class="flex">
            <div class=" center">
                <p>用户名：</p>
                <el-input class="w-150" v-model="input" placeholder="请输入"></el-input>
            </div>
            <div class=" center">
                <p >姓名：</p>
                <el-input class="w-150" v-model="input" placeholder="请输入"></el-input>
            </div>
            <div class=" center">
                <p >手机号：</p>
                <el-input class="w-150" v-model="input" placeholder="请输入手机号"></el-input>
            </div>
            <div class=" center">
                <p>状态：</p>
                <el-select  class="w-200" v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class=" center">
                <p>状态：</p>
                <el-select class="w-200" v-model="value1" placeholder="请选择">
                    <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="flex">
                <el-button class="w-100">重置</el-button>
                <el-button class="w-100" type="primary">搜索</el-button>
            </div>
        </div>
        <div class="h-30"></div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="userName"
                label="用户"
                width="180">
            </el-table-column>
            <el-table-column
                prop="nickName"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="phone"
                label="手机号">
            </el-table-column>
            <el-table-column
                prop="email"
                label="邮箱">
            </el-table-column>
            <el-table-column
                prop="states"
                label="状态">
                <!-- <template>
                    <p v-if="states == 1">正常</p>
                    <p v-else>禁用</p>
                </template> -->
            </el-table-column>
            <el-table-column
                prop="admin"
                label="系统">
                <!-- <template>
                    <p v-if="admin == 1">总部系统</p>
                    <p v-else>服务商系统</p>
                </template> -->
            </el-table-column>
            <el-table-column
                prop="time"
                label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default{
        name:"User",
        data() {
            return {
                options: [{
                    value: '1',
                    label: '全部'
                }, {
                    value: '2',
                    label: '正常'
                }, {
                    value: '3',
                    label: '停用'
                }],
                value: '',
                options1: [{
                    value: '1',
                    label: '总部系统'
                }, {
                    value: '2',
                    label: '服务商系统'
                }, {
                    value: '3',
                    label: '合伙人系统'
                }, {
                    value: '4',
                    label: '交付中心系统'
                }],
                value1: '',
                input:'',
                tableData:[
                    {
                        id:1,
                        userName:'张给',
                        nickName:'杨卓',
                        phone:'18888888888',
                        email:'123@qq.com',
                        states:1,
                        admin:1,
                        time:'2024-10-9 22:33'
                    }
                ]
            }
        },
        methods:{
            handleEdit(e,type){
                console.log(e,type)
            },
            handleDelete(e,type){
                console.log(e,type)
            }
        }
    }
</script>